<template>
  <div class="detail email-detail" v-show="isEndAll" :style="{height:$height-131+'px'}">
    <div class="detail-left" >
      <h1 class="title main-title">主题：{{content.emailSubject}}</h1>
      <ul class="message" >
        <!-- 已发送-->
        <li><span>发件人：</span>
          <div class="commonText">{{content.senderEmail}}</div>
        </li>
        <li><span >收件人：</span>
          <div class="box">
            <div class="box-one" v-for="item,index in content.addresseeEmailArray" :key="index">
              <div class="box-detail">
                <b>{{item}}</b>
              </div>
            </div>
          </div>
        </li>
        <li v-show="content.emailCarbonCopy"><span >抄 送：</span>
          <div class="box">
            <div class="box-one" href="javascript:void(0)" >
              <div class="box-detail">
                <b>{{content.emailCarbonCopy}}</b>
              </div>
            </div>
          </div>
        </li>
        <li v-show="content.emailSecretDelivery&&content.emailType==0"><span >密 送：</span>
          <div class="box">
            <div class="box-one" href="javascript:void(0)" >
              <div class="box-detail" >
                <b>{{content.emailSecretDelivery}}</b>
              </div>
            </div>
          </div>
        </li>
        <li><span>时 间：</span>
          <div class="commonText">{{content.sendTime}}</div>
        </li>
        <li v-show="content.emailHtmlpicList.length>0"><span>附 件：</span>
          <div class="else-file-get">共{{content.emailHtmlpicList.length}}个文件
            (<a v-for="item in content.emailHtmlpicList" href="javascript:void(0)" :title="`下载附件${item.picName}`" @click="look(item)"
                class="file-name">{{item.picName}};</a>)
          </div>
        </li>
      </ul>
      <!-- 内容滚动区域-->
      <div class="scroll-area">
        <iframe :src="`/api/blade-email/html/content?id=${mailId}&ip=${this.host}&Blade-Auth=${token}`" width="100%"
                height="600px"></iframe>
      </div>
      <!-- 附件展示-->
      <div class="else" v-show="content.emailHtmlpicList.length>0">
        <h1 class="title-else" style="margin-bottom: 10px">附件 (共{{content.emailHtmlpicList.length}}个)</h1>
        <MailFileDetail :list="content.emailHtmlpicList"></MailFileDetail>
      </div>
    </div>
  </div>
</template>

<script>
    import MailFileDetail from '@/components/mail/file/MailFileDetail'
    import {getMailDetail} from "@/api/mail/make"
    import {mapState, mapGetters} from 'vuex'
    import {getToken} from '@/util/auth'
    import {fileStreamDown} from '@/api/mail/'
    export default {
        name: "detail",
        props:['id'],
        components: {MailFileDetail},
        data() {
            return {
                isTrace: false,
                open: false,
                content: {
                    boxId: '',
                    addresseeEmail: '',//收件人邮箱数组
                    emailCarbonCopy: '',//抄送数组
                    emailSecretDelivery: '',//密送数组
                    emailHtmlpicList: [],//附件列表
                },
                relationList: [],
                customerList: [],
                currentCustomer: '',
                customer: {
                    name: '相关往来客户',
                    email: '客户邮箱'
                },
                moveArchiveFolderId: '',
                isEndAll: false,
                host: '',
                mailId: '',
                openList: [],//追踪列表
                openRow: {},//最新一条
                showPeople: {
                    senderMan: [],//收件箱
                    addressMan: [],
                    carbonMan: [],
                    secretMan: []
                },
                currentEmail: '',
                loading: false,
                isLoading: false,
                token:"bearer " + getToken()
            }
        },
        computed: {
            ...mapState(['common']),
            ...mapGetters(["userInfo"]),
        },
        created() {
            this.mailId = this.id;
            if (process.env.NODE_ENV == 'production') {//生成环境
                this.host = 'https://' + location.host
            }else{
                this.host = 'http://192.168.0.6:1888'
            }
            this.getDetail(this.id);
        },
        methods: {
            look(row){
                fileStreamDown(row.id).then(res => {
                    var blob = new Blob([res.data]);
                    var downloadElement = document.createElement('a');
                    var href = window.URL.createObjectURL(blob); // 创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = row.picName; // 下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); // 点击下载
                    document.body.removeChild(downloadElement); // 下载完成移除元素
                    window.URL.revokeObjectURL(href); // 释放掉blob对象
                })
            },
            lookExit() {
                let routeUrl = this.$router.resolve({
                    path: `/mail/send/review`,
                    query: {
                        id: this.content.bounceId
                    }
                });
                window.open(routeUrl.href, '_blank');
            },
            getDetail(id) {
                getMailDetail(id).then(res => {
                    if (res.data.success) {
                        this.content = res.data.data;
                        console.log(this.content)
                        this.isEndAll = true;
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "../../../styles/reviewEmail";
  .detail{
    .detail-left{
      width: 100%;
    }
  }
  .send-state {
    margin-bottom: 10px;
    background-color: #2a97f914;
    padding: 10px 15px;
    border-radius: 5px;

    span {
      cursor: pointer;
      margin-left: 25px;
      color: #2a97f9;
      border-bottom: 1px solid #2a97f9;
    }

    p {
      line-height: 25px;
      font-size: 13px;
    }

    table {
      display: block;
      width: 100%;
      max-height: 250px;
      overflow-y: auto;

      tbody,
      thead {
        padding: 10px 30px;
        align-items: center;
        color: #333;
        font-size: 13px;
      }

      td,
      th {
        color: #2D3F50;
        padding: 6px 10px;
        text-align: center;
      }

      th {
        font-weight: bold;
        color: #232323;
      }
    }
  }
</style>
